<template>
  <div class="tip">
      <svg @click="goBack()" t="1743402074255" class="backIcon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2913" width="20" height="20">
          <path d="M739.555556 198.599111L412.842667 525.312 739.555556 852.024889l-84.821334 84.764444-411.534222-411.477333L654.791111 113.777778z"
              fill="#fff" p-id="2914">
          </path>
      </svg>
      我的收藏
  </div>

  
  <div v-if="newsList!=null && newsList.length!=0" class="category-news-list">
      <div v-for="news in newsList" :key="news.title" class="list-item" @click="navigateToNewsDetails(news)">
          <div class="list-item-content">
              <div class="list-item-title">{{ news.title }}</div>
              <div class="list-item-subtitle">{{ getNewsCategoriesName(news.categoryId) }} · {{ news.publishTime }}</div>
          </div>
          <img v-if="news.frontCover" :src="news.frontCover" width="80" height="60" style="border-radius: 6px; object-fit: cover;">
      </div>
  </div>

  <div v-else style="text-align: center; font-size:16px; margin-top: 20px;">
      ———您还没有收藏的新闻，快去浏览吧~ ———
  </div>
  


</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router';
import api from '@/api';
import { NewsStore } from '@/stores/newsInfoStore';
import { UserStore } from '@/stores/userInfoStore';

const route = useRoute();
const router = useRouter();
const newsStoreObject = NewsStore();
const userStoreObject = UserStore();

const newsList = ref([])


// 数据定义
const News_queryDTO = ref({
  categoryId: null,
  status: 1,

  current: 1,
  size: 20,
})


// 获取新闻分类名称
const getNewsCategoriesName = (Id) => {
  if (Id != null) {
      return newsStoreObject.newsCategoryInfo.find(ncInfo => ncInfo.id == Id)?.name;
  } else { return null }
};

const navigateToNewsDetails = (news) => {
  router.push({
      path: '/NewsDetails',
      query: {
          NewsId: news.id,
          newsCategoryName: getNewsCategoriesName(news.categoryId)
      }
  });
};

const goBack = () => {
router.back();
}


onMounted(async() => {
  api.getNewsByUserFavorite(userStoreObject.userInfo.id, News_queryDTO.value.current, News_queryDTO.value.size).then(res => {
      newsList.value.push(...res.data.data)
  })
})

</script>

<style lang="scss" scoped>
@mixin CommonStyle-center {
display: flex;
justify-content: center;
align-items: center;
}


.tip {
@include CommonStyle-center;
top: 0;
background-color: #409eff;
color: #fff;
height: 60px;
min-height: 60px;
position: relative;
}
.backIcon {
position: absolute;
left: 10px;
}

.category-news-list {
  margin-top: 16px;
}
.list-item {
  display: flex;
  margin-bottom: 16px;
  padding: 10px 30px;
  border-bottom: 1px solid #eaeaea;
  cursor: pointer;
}
.list-item-content {
  flex: 1;
  margin-right: 16px;
}
.list-item-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 15px;
}

.list-item-subtitle {
  color: #8e8e93;
  font-size: 14px;
}

</style>
